<template>  <div class="page">
  <div class="module">

    <div class="c">
        <div class="content">
          <div class="header">大赛证书查询平台</div>
          <div v-if="tableData.list.length>0">
            <img :src="tableData.list[0].header" width="100" height="140"/>
          </div>
          <div class="title" v-if="tableData.list.length>0">{{tableData.list[0].userName}}</div>
      <div class="global-table">
        <el-table
          :data="tableData.list"
          :header-cell-style="{
              background: '#F5F7FA',
              color: '#333',
          }"
          style="width: 100%"
        >
          <el-table-column prop="matchName" label="赛事名称" >
            <template #default="scope">
              {{scope.row.matchName}} {{scope.row.matchNameExt?'（'+scope.row.matchNameExt+'）': ''}}
            </template>
          </el-table-column>
          <el-table-column prop="itemName" label="赛项" width="150">
            <template #default="scope">
              {{scope.row.itemName}}（{{scope.row.groupName}}）
            </template>
          </el-table-column>
          <el-table-column prop="itemName" label="层级" width="80">
            <template #default="scope">
              {{scope.row.matchLevel ==1 ? '国赛': '省赛'}}
            </template>
          </el-table-column>
          <el-table-column prop="company" label="选手单位" width="200"/>
          <el-table-column prop="score" label="奖项" width="120"/>
          <el-table-column prop="teacher" label="指导老师" width="120"/>
          <el-table-column prop="certificate" label="证书编号" width="120"/>
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <span class="table-text-btn" v-if="scope.row.url" @click="viewUrl(scope.row.url)">查看</span>
              <span class="table-text-btn" v-if="scope.row.url" @click="downLoadFile(scope.row.url, realName + '-' + scope.row.certificate)">下载</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-row class="global-pagination">
        <el-col :span="8" class="total"> 共搜索 {{tableData.list.length}} 条数据 </el-col>
      </el-row>
    </div>
        </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import {useRoute} from "vue-router";
import baseService from "@/service/baseService";
import {ElMessage} from "element-plus";
import app from "@/constants/app";
import {getCache} from "@/utils/cache";
const route = useRoute();

const tableData = reactive({
  list: []
});

const showViewUrlFlag = ref(false);


const certificateJson = getCache('certificate', { isSessionStorage: true }, {});
const realName = certificateJson.realName;
const idCard = certificateJson.idCard;
const certificate = certificateJson.certificate;

//查看证书
const viewUrl = (url: string) => {
  window.open(url);
};

// 查询证书
const queryCertificateBy = () => {
  baseService
      .post("/front/spuser/queryCertificateBy", {realName, idCard, certificate})
      .then((res) => {
            if (res.code === 0) {
              tableData.list = res.data;
            } else {
              ElMessage.error(res.msg);
            }
          }
      );
};

const downLoadFile = (url: string, name: string) => {
  let a = document.createElement('a');
  let evt = document.createEvent('MouseEvents');
  a.download = '晋级列表';
  a.href = app.api+"/front/download?imageUrl="+ url +"&fileName=" + name;
  evt.initEvent('click',true,true);
  a.dispatchEvent(evt);
  window.URL.revokeObjectURL(a.href);
}


queryCertificateBy();

</script>



<style lang="scss" scoped>
.page {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.module {
    width: 1440px;
    height: 900px;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;

    .c {
        width: 1136px;
        height: 823px;

        background: #ffffff;
        border-radius: 12px;

        .content {
            padding: 20px 24px;
        }
        .header{
          text-align: center;
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 25px;
        }
        .title {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: $font-weight-bold;
            margin-bottom: 16px;

            span {
                width: 4px;
                height: 12px;
                background: #00a0e9;
                margin-right: 7px;
            }
        }
        .avatar{
            
            width: 38px;
            height: 38px;
            display: block;
            margin:auto;
        }
        .global-pagination{
          padding: 0px;
        }
    }
}
</style>
<style lang="scss">
.ruleForm {
    .el-form-item--default .el-form-item__label {
        font-weight: $font-weight-bold;
    }
}
</style>
